<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        #app{
            width: 840px;
            height: 620px;
            background: #f6f6f6;
            padding: 25px ;
        }
        .item{
            width: 200px;
            height: 300px;
            background: white;
            float: left;
            margin: 5px ;
        }

        .img{
            width: 180px ;
            height: 180px ;
            padding: 10px;
        }
        .text{
            width: 100px ;
            height: 50px ;
            overflow: hidden;
            font-size: 10px ;


            text-align: center;
            margin-left: 50px;
        }
        .price{
            color: red;
            text-align: center;
            margin-top: 15px ;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="item" v-for="(item,index) in mockData">
            <img :src="item.img" alt="" class="img">
            <div class="text">{{item.text}}</div>
            <div class="price">{{item.price}}</div>
        </div>

    </div>
    <script>

        let vm = new Vue({
            el: "#app",
            //属性 -变量
            data: {

                "mockData": [
                    {
                        "id": 1,
                        "img": "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/189873/15/364/303731/608905deE6cc5de4d/baed494f993e019a.jpg.webp",
                        "text": "亿匚鑫 意式轻奢岩板餐桌椅组合家用小户型现代简约可伸缩方圆两用折叠实木圆桌子吃饭桌 【进口岩板】1.35米1桌6椅",
                        "price": '￥'+2799
                    },
                    {
                        "id": 2,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
                        "text": "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
                        "price": '￥'+266
                    },
                    {
                        "id": 3,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/156232/40/12942/112817/6041ced3Ef7f383b3/7e29e51c25f7b77e.jpg.webp",
                        "text": "都市丽人文胸无钢圈聚拢中薄款蜂巢杯透气美背小花心波斯菊蕾丝胸罩内衣女2B9506 浅肤32/70A杯",
                        "price": '￥'+98
                    },
                    {
                        "id": 4,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/176546/26/4766/230854/607aa012E97def171/7417547d2d2e5da3.jpg.webp",
                        "text": "兰叶源  创意中式陶瓷仕女香插香座插香器线香室内檀香家用线香薰炉摆件 小宫娥 坐  哑光",
                        "price": '￥'+166
                    },
                    {
                        "id": 5,
                        "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/119997/6/15535/123334/5f8d237bE36364127/a4d5ee3e0209d2a0.jpg.webp",
                        "text": "得力（deli）4905 电脑椅 家用办公椅 转椅人体工学网布椅子 时尚升降座椅",
                        "price": '￥'+459
                    },
                    {
                        "id": 6,
                        "img": "https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/158542/28/20137/213892/607aa011Ef99cf77f/ee308525809e7d32.jpg.webp",
                        "text": "兰叶源  创意简约现代手工陶瓷人物家居小摆件客厅办公室书房工艺品装饰品 小胖",
                        "price": '￥'+96
                    },
                    {
                        "id": 7,
                        "img": "https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/184019/38/1640/74927/608bce5aEcbe6dfa2/7649c02195797afa.jpg.webp",
                        "text": "浪琴(Longines)瑞士手表 嘉岚系列 石英钢带女表 L42091917",
                        "price": '￥'+9800
                    },
                    {
                        "id": 8,
                        "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/161897/28/19295/153357/607aa1caEd6d31b06/470d5052656bbc5e.jpg.webp",
                        "text": "兰叶源  木雕福猪摆件生肖猪一对客厅玄关电视柜家居装饰乔迁创意礼品 小号木福猪一只(长18厘米)",
                        "price": '￥'+726
                    },
                    
                ]
            }

            ,
            // 方法-函数
            methods: {

            }
        })
    </script>
</body>

</html>